<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--  <a href="#/login">点我登陆</a> -->
  <!--  <a href="#/register">点我注册</a> -->

    <!--router-link 好处：书写路径不需要#  tag 渲染 标签：为button span 。。。。-->
    <router-link to="/login" tag="button">我要登录</router-link>
    <router-link to="/register" tag="button">我要注册</router-link>


    <router-view></router-view>
</div>

<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
   //声明组件模板
   const  login={
       template: "<h1>用户登录</h1>"
   };
   const  register= {
       template: "<h1>用户注册</h1>"
   };

   //声明路由对象
   const  router= new VueRouter(
       {
           routes: [
               //默认路由 路径为'/' 用来第一次进入页面 默认显示的组件
             //  {path: '/' ,component: login},
               //默认路由推荐 写法
               {path: '/' ,redirect:'/login'},// redirect: 重定向 请求路由
               {path:'/login', component: login},
               {path: '/register' ,component: register }
           ]
       }
   )

   const app = new Vue(
        {
            el: "#app",
            data: {},
            methods: {},
            router:router


        }
    )
</script>
</body>
</html>